<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>change_weather</title>
  </head>

  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="js/babel.min.js"></script>
    <!-- <script src="./change_weather.js"></script> -->
    <script type="text/babel">
      // 1.创建组件
      class Weather extends React.Component {
        constructor(props) {
          super(props);
          this.state = { isHot: true };
          this.demo = this.changeWeather.bind(this);
        }
        render() {
          //   const state = this.state;
          const { isHot } = this.state;
          return (
            <h1 onClick={this.demo}>今天天气很{isHot ? "炎热" : "凉爽"}</h1>
          );
        }

        changeWeather() {
          // console.log("被点击了哦！");
          const isHot = this.state.isHot;
          // this.state.isHot=!isHot
          this.setState({
            isHot: !isHot,
          });
          // console.log(this.state.isHot);
        }
      }
      // 2.渲染组件
      ReactDOM.render(<Weather />, document.getElementById("test"));
    </script>
  </body>
</html>
